<template>
  <div class="i-ctrl">
    <div style="margin: 0px auto">
      <i @click= "playOne($event, item)" class="el-icon-video-play"></i>
      <i id="add_idx" @dblclick="appendItem($event, item)" @click= "appendItem($event, item)" class="el-icon-plus"></i>
      <div style="display:inline" @dblclick="userCollect($event, item)" @click = "userCollect($event, item)">
        <i v-if="item.collect" style="color:#ff0000" class="el-icon-star-on"></i>
        <i v-else class="el-icon-star-on"></i>
      </div>
      <i @click= "shareItem(item)" class="el-icon-share"></i>
      <i v-if="!isGuest" @click= "downItem($event, item)" class="el-icon-download"></i>
      <i v-if="!isGuest" @click= "openMenu($event, item)" class="el-icon-more"></i>
    </div>
  </div>
</template>

<script>
import { success } from '@/utils/toast'
import { collectItem, addAnimation } from '@/api/tool'
import { mapGetters, mapMutations } from 'vuex'
import { playItem, addItem, shareItem, downItem } from '@/api/event'

export default {
  name: 'item-ctrl',
  props: {
    item:Object,
    default: {},
  },
  components: {
  },
  computed: {
    ...mapGetters([
      'isGuest',
      'getPosX',
      'getPosY',
      'add_hover'
    ])
  },
  data() {
    return {
      coll:{},
    }
  },
  created() {
  },
  methods:{
    shareItem, 
    downItem,
    ...mapMutations(['setMenuStat', 'setMenuHit', 'setLoginDlg', 'setAddHover']),
    playOne(e, item) {
      e.stopPropagation()

      addAnimation(this, e, () => {
        playItem(this, item)
      })
    },
    userCollect(e, item) {
      e.stopPropagation()
      if (this.isGuest) {
        this.setLoginDlg({visual:true, type:true})
        return
      }
      
      collectItem(item)
    },
    appendItem(e, item) {
      // e.preventDefault()
      e.stopPropagation()
      addAnimation(this, e, () => {
        addItem(this, item)
      })
      return
    },
    openMenu(e, item) {
      e.preventDefault()
      // e.stopPropagation()
      this.setMenuStat({
        status:true, 
        fileid:item.fileid, 
        artist:item.artist,
        hit:true,
        x:e.pageX + 5, 
        y:e.pageY
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .i-ctrl {
    width: 100%;
    height: 100%;
    font-size:17px;
    margin: 0px auto;
    display: flex;
    align-items: center;
    i {
      cursor:pointer;
      height: inherit;

    }

    i:hover {
      color:#409EFF;
    }

    .test {
      position: absolute;
    }
  }
</style>
